<template>
  <h2>这是HelloWorld组件学法watch</h2>
  <p>数字的值是:{{ num }}</p>
  <p>消息是:{{ msg }}</p>
  <button @click="num++">修改数据</button>
  <button @click="msg += '@'">修改字符串</button>
</template>

<script>
import { ref, watch } from "vue"
export default {
  name: "HelloWorld",
  //#region
  // watch: {
  // 简单写法
  // num(newVal, oldVal) {
  //   // 侦听的数据一改变就触发这个函数
  //   console.log(newVal, oldVal)
  // },
  // 复杂写法
  // num: {
  //   deep: true,
  //   immediate: true, //开启立刻监听
  //   handler(newVal, oldVal) {
  //     console.log(newVal, oldVal)
  //   },
  // },
  // },
  //#endregion
  setup() {
    let num = ref(10)
    let msg = ref("hello")
    // watch有三个参数,第一个是带监视的数据,第二个是回调函数new和old,第三个是配置项,比如开启深度侦听或是立刻监视
    // 1.侦听一个数据的变化
    // watch()=>{}
    // watch(num, (newVal, oldVal) => {
    //   console.log("数据变化了", newVal, oldVal)
    // })
    // 2.侦听多个数据的变化
    // watch([num, msg], (newVal, oldVal) => {
    //   console.log("有一个数据变化我就触发", newVal, oldVal)
    // })
    return {
      num,
      msg,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
